<template>
    <div class="drag-list flex-between">
        <div class="handle-page flex-center">
            <span @click="prePage" style="margin-right:15px">
                <img class="pointer icon" src="../assets/img/page-disable.png" v-if="scrollLeft <= 0 || noOverflow" alt="">
                <img class="pointer icon" src="../assets/img/page.png" style=" transform:rotate(180deg);" v-else alt="">
            </span>
            <span @click="nextPage">
                <img class="pointer icon" src="../assets/img/page-disable.png" style=" transform:rotate(180deg);" v-if="scrollLeft >= scrollWidth || noOverflow" alt="">
                <img class="pointer icon" src="../assets/img/page.png" v-else alt="">
            </span>
            <!-- <span :class="['pointer','icon',{'disable':scrollLeft >= scrollWidth || noOverflow}]" @click="nextPage">
                    <i class="el-icon-caret-right"></i>
                </span> -->
        </div>
        <div class="bottom-drag-container flex-center" ref="dragContainer">
            <slot></slot>
        </div>
        <div class="handle-page flex-center">
            <span @click="prePage" style="margin-right:15px">
                <img class="pointer icon" src="../assets/img/page-disable.png" v-if="scrollLeft <= 0 " alt="">
                <img class="pointer icon" src="../assets/img/page.png" style=" transform:rotate(180deg);" v-else alt="">
            </span>
            <span @click="nextPage">
                <img class="pointer icon" src="../assets/img/page-disable.png" style=" transform:rotate(180deg);" v-if="scrollLeft >= scrollWidth " alt="">
                <img class="pointer icon" src="../assets/img/page.png" v-else alt="">
            </span>
        </div>
    </div>
</template>

<script>
export default {
    props: ['noOverflow', 'contentNum','restScrollWidth','copyOverflow'],
    data() {
        return {
            scrollLeft: 0,
            scrollWidth: 0,
            disabled:false
        }
    },
    beforeUpdate() {
        if(this.restScrollWidth){
            this.scrollLeft = this.$refs.dragContainer.scrollLeft = 0
            this.$emit('update:restScrollWidth', false)
        }
    },
    mounted() {
        this.$nextTick(() => {
            let viewWidth = document.documentElement.getBoundingClientRect().width
            let containerWidth = this.$refs.dragContainer.clientWidth
            if (viewWidth < 1440) {
                let num = Math.floor(containerWidth / 95)
                this.$emit('update:contentNum', num)
            } else {
                let num = Math.floor(containerWidth / 130)
                this.$emit('update:contentNum', num)
            }
            if (this.$refs.dragContainer.clientWidth === this.$refs.dragContainer.scrollWidth) {
                this.$emit('update:noOverflow', true)
                this.$emit('update:copyOverflow', true)
                this.disabled = true
                console.log(this.$refs.drag)
                return
            }
            this.scrollWidth = this.$refs.dragContainer.scrollWidth
        })
    },
    methods: {
        prePage() {
            // if (this.noOverflow) return
            if (this.scrollLeft <= 0) return
            this.$refs.dragContainer.scrollLeft -= 500
            this.scrollLeft = this.$refs.dragContainer.scrollLeft
        },
        nextPage() {
            // if (this.noOverflow) return
            if (this.scrollLeft >= this.scrollWidth) return
            this.$refs.dragContainer.scrollLeft += 500
            this.scrollLeft = Math.ceil(this.$refs.dragContainer.scrollLeft + this.$refs.dragContainer.clientWidth)
        }

    }
}
</script>

<style lang="scss">
.drag-list {
    position: fixed;
    bottom: 0;
    height: 15vw;
    width: 100%;
    padding: 0 20px;
    background: rgba(180,225,255,0.43);
    z-index: 999;
    .bottom-drag-container {
        overflow-x: auto;
        margin: 0 10px;
        width: calc(100vw - 300px);
        > div {
            padding: 0 10px;
            max-width: 100%;
        }
    }
    .icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
}
// @media screen and(max-width: 1439px) {
//     .drag-list{
//         height: 13vw;
//     }
// }
</style>